<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="formData.username" />
    </div>

    <script src="../vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          formData: {
            username: '',
          },
        },
        watch: {
          // 其实我们之前写的函数形式的侦听器也是简写形式
          // 这里是监听不到 formData.username 的变化
          // formData() {
          //   console.log('formData数据变了');
          // },
          // 完整写法：
          // formData: {
          //   deep: true, // 深度监听，能够监听到该数据下键值对的值的变化
          //   handler() {
          //     console.log('hehe');
          //   },
          // },
          // 如果想要精准的监听对象中某个属性的变化，like this...
          'formData.username': function () {
            console.log('hehe');
          },
        },
      });
    </script>
  </body>
</html>
